<template>
  <searchBarCompoent
    ref="searchBarEle"
    :placeholder="$t(`archive_set_goods_type.archive_goods_type_quick_serch`)"
    searchName="type_name"
    @search-event="searchBarPost"
    v-model="searchFormData"
    :search-value="searchValue"
    plan-key="key"
    curpagename="su65756oiuoyhjty52"
    close-plan
  >
    <template #footer>
      <el-button type="primary" @click="serachOpenGoodsTypeDarwer">
        {{ $t("archive_set_goods_type.add_goods_type") }}
        <!-- 添加商品类型 -->
      </el-button>
    </template>
    <!-- 高级搜索弹出框 插槽-->
    <template #searchForm="searchProp">
      <!--  高级搜索弹出框内容-->
      <div class="modal-content">
        <!-- 高级搜索 -->
        <div class="modal-title">
          <!-- {{ $t(`merak.search_list_ad`) }} -->
        </div>

        <div class="modal—body">
          <el-scrollbar height="100%">
            <div class="scrollbar-content">
              <!-- 已选参数 组件-->
              <selectedParams v-model="searchFormData" label="label" val="value" option-key="options"></selectedParams>

              <el-form
                ref="serachFormRef"
                :rules="serachFormRules"
                :model="searchFormData"
                label-position="top"
                class="search-form"
              >
                <el-row gutter="40">
                  <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.type_name.label" prop="type_name.value">
                      <!-- 商品类型俄文 -->
                      <el-input
                        class="qf_input"
                         
                        v-model="searchFormData.type_name.value"
                        :placeholder="searchFormData.type_name.placeholder"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- <el-col :span="langEnv"> -->
                    <!-- <el-form-item :label="searchFormData.type_name_cn.label" prop="type_name_cn.value"> -->
                      <!-- 商品类型中文 -->
                      <!-- <el-input -->
                        <!-- class="qf_input" -->
                        <!-- v-model="searchFormData.type_name_cn.value" -->
                        <!-- :placeholder="searchFormData.type_name_cn.placeholder" -->
                      <!-- /> -->
                    <!-- </el-form-item> -->
                  <!-- </el-col> -->

                  <!-- <el-col :span="langEnv"> -->
                    <!-- <el-form-item :label="searchFormData.type_name_en.label" prop="type_name_en.value"> -->
                      <!-- 商品类型英文 -->
                      <!-- <el-input -->
                        <!-- class="qf_input" -->
                        <!-- v-model="searchFormData.type_name_en.value" -->
                        <!-- :placeholder="searchFormData.type_name_en.placeholder" -->
                      <!-- /> -->
                    <!-- </el-form-item> -->
                  <!-- </el-col> -->

                  <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.tag.label" prop="tag.value">
                      <!-- 商品类型标签 -->
                      <!-- 标签 -->
                      <el-select
                        class="qf_select"
                         
                        v-model="searchFormData.tag.value"
                        :placeholder="searchFormData.tag.placeholder"
                      >
                        <el-option v-for="item in serachFormTagOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.class_id.label" prop="class_id.value">
                      <!-- 商品类型分组 -->
                      <el-select
                        class="qf_select"
                         
                        v-model="searchFormData.class_id.value"
                        :placeholder="searchFormData.class_id.placeholder"
                        filterable
                      >
                        <el-option
                          v-for="item in serachFormClassIdOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.package_type.label" prop="package_type.value">
                      <!-- 商品类型分组 -->
                      <el-select
                        class="qf_select"
                         
                        v-model="searchFormData.package_type.value"
                        :placeholder="searchFormData.package_type.placeholder"
                        filterable
                      >
                        <el-option
                          v-for="item in serachFormPackageTypeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.has_color.label" prop="has_color.value">
                      <!-- 是否有颜色 -->
                      <!-- 有颜色 -->
                      <el-select
                        class="qf_select"
                         
                        v-model="searchFormData.has_color.value"
                        :placeholder="searchFormData.has_color.placeholder"
                      >
                        <el-option v-for="item in serachFormHasOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.has_size.label" prop="has_size.value">
                      <!-- 是否有规格 -->
                      <!-- 有规格 -->
                      <el-select
                        class="qf_select"
                         
                        v-model="searchFormData.has_size.value"
                        :placeholder="searchFormData.has_size.placeholder"
                      >
                        <el-option v-for="item in serachFormHasOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.has_gender.label" prop="has_gender.value">
                      <!-- 是否有性别 -->
                      <!-- 有性别 -->
                      <el-select
                      
                        class="qf_select"
                         
                        v-model="searchFormData.has_gender.value"
                        :placeholder="searchFormData.has_color.placeholder"
                      >
                        <el-option v-for="item in serachFormHasOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="langEnv">
                    <el-form-item :label="searchFormData.unit.label" prop="has_gender.value">
                      <!--  最小销售单位 -->
                      <!-- 最小销售单位  "searchFormData.unit.value"-->
                      <!-- <el-input
                        class="qf_input"
                         
                        v-model="searchFormData.unit.value"
                        :placeholder="searchFormData.type_name.placeholder"
                      /> -->


                    <!-- </el-form-item> -->
                  <!-- </el-col> --> 
                </el-row>
              </el-form>
            </div>
          </el-scrollbar>
        </div>
        <div class="modal-footer">
          <!-- 取消 -->
        <el-button type="default" @click="searchResetForm">{{ $t("merak.reset") }}</el-button>  
          <!-- 搜索 -->
          <el-button type="primary" @click="searchSubmitFormModalFn(searchFormRef)">{{ $t("merak.search") }}</el-button>
          <!-- 保存搜索方案 -->
          <!-- <el-button plain type="primary" v-if="searchProp.closePlan" @click="showPlanModal"> -->
          <!-- {{ $t("merak.save_search_scheme") }} -->
          <!-- </el-button> -->
        </div>
      </div>
      <!--  高级搜索弹出框内容-->
    </template>
    <!-- /高级搜索弹出框 插槽-->
  </searchBarCompoent>
</template>
<script lang="ts" setup>
import { ref, inject, onMounted, getCurrentInstance } from "vue";
import searchBarCompoent from "@/components/SearchBar";
import selectedParams from "@/components/SearchBar/components/selectedParams.vue";
const { proxy } = getCurrentInstance();
const searchBarEle = ref(null);

const searchBarRef = inject("searchBarRef");
const searchValue = inject("searchValue");
const searchFormData = inject("searchFormData");
const serachFormRules = inject("serachFormRules");
const serachFormHasOptions = inject("serachFormHasOptions");
const serachFormClassIdOptions = inject("serachFormClassIdOptions");
const serachFormTagOptions = inject("serachFormTagOptions");
const serachFormPackageTypeOptions = inject("serachFormPackageTypeOptions");
const serachOpenGoodsTypeDarwer = inject("serachOpenGoodsTypeDarwer");
const searchCloseModalFn = inject("searchCloseModalFn");
const searchResetForm = inject("searchResetForm");
const searchSubmitFormModalFn=inject("searchSubmitFormModalFn");
const searchBarPost=inject("searchBarPost");

 

//根据语言切换布局
const langEnv = proxy.$t("lang") == "ru" ? 8 : 6;

 
onMounted(() => {
  searchBarRef.el = searchBarEle;
});
</script> 

<style lang="scss" scoped>
</style> 